<template>
  <div class="all">
        <div class="class-shop-all"  v-for="(item,index) in shoucangall.result" :key="index" :class="{ open: currentIndex == index }" @touchstart="touchStart" @touchend="touchEnd(index,$event)">
          <div @click="doSomething(index)" class="class-shop-all-one">
                            <div class="shop-left">
                      <div class="shop-left-all">
                         <img src="../assets/kefu.png" alt="">
                         <div>{{item.dealerName}}</div>
                      </div>

                    <div class="shop-img">
                      <img src="../assets/img2.png" alt="" class="img-one">
                      <img src="../assets/img3.png" alt="" class="img-two">
                    </div>
                 </div>
                 <div class="shop-text">
                     <div class="shop-text-one">经营品牌：{{item.brands}}</div>
                     <div class="shop-text-two">月成交额：{{item.monthDealSum}}</div>
                     <div class="shop-text-thrss">月买家数：{{item.monthBuyerNum}}位</div>
                 </div>
          </div>
                <div class="right-content" @click="deleteItem(index)" >取消收藏</div>
        </div>
               <div class="fiexedbei">
                 <div v-show="outblok">
                                      <img src="../assets/mifeng.png" alt="">
                                       <p>您还没有收藏过商店</p>
                 </div>

               </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        niupi:"拉菲、拉菲、拉菲",
        niupione:"4000万",
        niupitwo:"4000位",
        shoucangall:"",
        startClientX: 0,
        endClientX: 0,
        currentIndex: null,
        outblok:""
    }
  },
  beforeRouteEnter(to, from, next){
    // 添加背景色
  //  document.querySelector('body').setAttribute('style', 'background: #E4E4E4;')
    next()
  },
  methods:{
            //滑动开始
        touchStart(e) {
            this.startClientX = e.touches[0].clientX;
        },
                touchEnd(index, e) {
           console.log(e);
            this.endClientX = e.changedTouches[0].clientX;
            if(this.startClientX - this.endClientX > 10 && index != this.currentIndex){
                this.currentIndex = index
            }

            if(this.endClientX - this.startClientX > 10) {
                this.currentIndex = null
            }

            this.startClientX = 0;
            this.endClientX = 0;
        },
               doSomething(index) {
            if(this.currentIndex >= 0) {
                this.currentIndex = null
            }else {
                alert(index)
            }
        },
                //删除滑块
        deleteItem(index) {
            console.log(index);
             this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/dealerColl/del',{
                dealerId:this.shoucangall.result[index].dealerId,
                userId:this.$store.state.userInfo.id
             },
             {
            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }
          }).then(res =>{
            console.log("删除成功第"+index,res)
          })

      //    等到post发送成功才删除
              this.shoucangall.result.splice(index,1);
              this.currentIndex = null;
               this.outblok = ( this.shoucangall.result.length == 0)
        },

                     allshou(){
                   this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/dealerColl/collects?userId=2189687',{userId:'2189687'},          {
            headers: {
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }
          }).then(res=>{console.log('店铺收藏',res) 
          this.shoucangall = res.data
               this.outblok = ( this.shoucangall.result.length == 0)
          })
                
               },
                 ceshi(){
                               console.log(this.shoucangall.result)
                 }
  },
  mounted(){
    this.allshou()
    this.ceshi()
  }
}

</script>
<style scoped lang="scss">
.all{
  position: fixed;
  top:0.45rem;
  width: 100%;
  .fiexedbei{
    position: fixed;
    background: #F2F1F6;
    width: 100%;
    height: 100%;
  div{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:0.4rem;
    img{
      width: 1.34rem;
      height:0.74rem;
    }
    p{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        line-height: 14px;
        margin-top: 0.2rem;
    } }
  }
}
.right-content {
    width: 1rem;
    height: 1.6rem;
    background: #ff0000;
    line-height: 1.6rem;
    font-size: 0.16rem;
    text-align: center;
    position: absolute;
    top:0;
    right: -1rem;
    color: #fff;
}
.open {
    transform: translate(-1rem,0)
}

.class-shop-all{
   background: #FFFFFF;
   margin-bottom: 0.1rem;
   position: relative;
   transition: transform 0.3s;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  .shop-text{
    display: flex;
    flex-direction: column;
    margin-left: 0.14rem;
    font-size: 12px;
    color: #666666;
    .shop-text-one{
      margin: 0.147rem 0 0.1rem 0;
    }
    .shop-text-thrss{
      margin: 0.1rem 0 0.14rem 0;
    }
  }
  .shop-left{
    border-bottom: 1px solid #F2F1F6;
     margin:0 0rem 0 0.14rem;
    // border: 1px solid red;
    height: 0.423rem;
    display: flex;
    justify-content: center;
    //flex-direction: column;
    align-items: center;
    justify-content: space-between;
        .shop-img{
    display: flex;
    align-items: center;
    img{
       width: 0.16rem;
       height: 0.16rem;
       margin: 0.15rem 0.15rem 0.15rem 0;
    }
    }
  .shop-left-all{
    display: flex;
    align-items: center;
    img{
      width: 0.14rem;
      height:0.14rem;
      margin-right:0.09rem; 
    }
  }
  }

}
</style>